<template>
  <div>
    <div class="item c" v-if="canEdit">
      <div class="tit">{{ textAttr.name }}：</div>
      <div class="flex input">
        <input type="text" :placeholder="textAttr.name" v-model="textAttr.text" class="intxt" />
      </div>
    </div>
    <div class="item c" v-if="canHide">
      <div class="tit">显示{{ textAttr.name }}：</div>
      <div class="input">
        <div class="input-line">
          <span class="sp1">
            <em class="radio" :class="{ 'on': !textAttr.show }" @click="textAttr.show = false"></em>
            隐藏
          </span>
          <span class="sp1">
            <em class="radio" :class="{ 'on': textAttr.show }" @click="textAttr.show = true"></em>
            显示
          </span>
        </div>
      </div>
    </div>
    <div class="item" v-if="textAttr.show">
      <div class="tit">{{ textAttr.name }}文字样式：</div>
      <div class="input">
        <div class="input-line">
          <span class="sp1">
            <em
              class="radio"
              :class="{ 'on': !textAttr.customer }"
              @click="textAttr.customer = false"
            ></em>
            默认
          </span>
          <span class="sp1">
            <em
              class="radio"
              :class="{ 'on': textAttr.customer }"
              @click="textAttr.customer = true"
            ></em>
            自定义
          </span>
        </div>
        <template v-if="textAttr.customer">
          <div class="input-line">
            <div class="tit">字体大小：</div>
            <div class="input">
              <el-select v-model="textAttr.fontSize" placeholder="请选择">
                <el-option
                  v-for="(item, index) in fontSizeList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="input-line">
            <div class="tit">是否换行：</div>
            <span class="sp1">
              <em class="radio" :class="{ 'on': !textAttr.warp }" @click="textAttr.warp = false"></em>
              不换行
            </span>
            <span class="sp1">
              <em class="radio" :class="{ 'on': textAttr.warp }" @click="textAttr.warp = true"></em>
              <span style="white-space: nowrap;">允许换行</span>
            </span>
          </div>
          <div class="input-line">
            <div class="tit">字体设置：</div>
            <div class="input f">
              <el-tooltip effect="dark" content="颜色" placement="top">
                <colorPicker v-model="textAttr.fontColor" :defaultColor="defColor" />
              </el-tooltip>
              <el-tooltip effect="dark" content="加粗" placement="top">
                <div class="font" :class="{ 'on': textAttr.b }" @click="textAttr.b = !textAttr.b">
                  <span class="iconfont icon-B"></span>
                </div>
              </el-tooltip>
              <el-tooltip effect="dark" content="斜体" placement="top">
                <div class="font" :class="{ 'on': textAttr.i }" @click="textAttr.i = !textAttr.i">
                  <span class="iconfont icon-xieti"></span>
                </div>
              </el-tooltip>
              <el-tooltip effect="dark" content="下划线" placement="top">
                <div class="font" :class="{ 'on': textAttr.u }" @click="textAttr.u = !textAttr.u">
                  <span class="iconfont icon-xiahuaxian1"></span>
                </div>
              </el-tooltip>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "setTextAttr",
  props: {
    textAttr: {
      //要编辑的文字属性
      type: Object,
      required: true,
      default: {}
    },
    canEdit: {
      //是否可编辑
      type: Boolean,
      default: true
    },
    canHide: {
      //是否可隐藏
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      defColor: "#333", //默认颜色
      fontSizeList: [
        { label: "12px", value: 12 },
        { label: "13px", value: 13 },
        { label: "14px", value: 14 },
        { label: "15px", value: 15 },
        { label: "16px", value: 16 },
        { label: "17px", value: 17 },
        { label: "18px", value: 18 },
        { label: "19px", value: 19 },
        { label: "20px", value: 20 },
        { label: "21px", value: 24 },
        { label: "22px", value: 22 },
        { label: "23px", value: 23 },
        { label: "24px", value: 24 },
        { label: "25px", value: 25 },
        { label: "26px", value: 26 },
        { label: "27px", value: 27 },
        { label: "28px", value: 28 },
        { label: "29px", value: 29 },
        { label: "30px", value: 30 },
      ],
    };
  },
  created() {
    this.defColor = this.textAttr.fontColor || "#333";
  },
};
</script>
